<!DOCTYPE html>
<html lang="zh">
<head>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>抽奖机</title>
    <link href="css/main.css" type="text/css" rel="stylesheet" />
    <style>
        body{
            background-color: #443b5c;
        }
        .loading{
            position: fixed;
            z-index: 9999;
            background-color: #443b5c;
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            padding-top: 60%;
        }

        .loading .tit{
            display: block;
            width:60%;
            margin: 0 auto 20px;

        }
        .loading .progress{
            width:70%;
            height: 10px;
            margin: 0 auto;
            background-color: #fff;
            border: 1px solid #000000;
            border-radius:10px;
        }
        .loading .degree{
            background-color: #f29530;
            height: 100%;
            width: 0;
            border-radius:10px;
            position: relative;
        }
        .loading  .lod{
            position: absolute;
            width: 1.5rem;
            right: 0;
            top:-1rem;
        }
        .container{
            background-color: #443b5c;
        }
        .screen-wrap{
            height:23rem;
            box-sizing: border-box;
            overflow: hidden;
            position: relative;
            background: url("images/prizeClaw/cbg.png") no-repeat center;
            background-size: cover;
        }
        .gifts-scene{
            position: absolute;
            left: 0;
            top: 0;
            width:100%;
            height:100%;
            overflow: hidden;
        }
        .scene{
            position: absolute;
            left: 0;
            top: 0;
            width:100%;
            height:100%;
            background: url("images/prizeClaw/screen.png") no-repeat center top;
            background-size: cover;
            z-index: 999;
        }
        .top-ban{
            position: absolute;
            left: 0;
            top:0;
            width: 100%;
        }

        .plane{
            position: absolute;
            top: 0;
            left: 50%;
            width:9rem;
            height: 3rem;
            margin-left: -4.5rem;
            background: url("images/prizeClaw/plane.png") no-repeat center top;
            background-size: contain;
            z-index: 102;

        }
        .grabber{
            position: absolute;
            width: 70px;
            height:60px;
            left: 50%;
            margin-left: -35px;

            z-index: 101;
            background: url("images/prizeClaw/wire.png") repeat-y center;
        }
        .grabber .hook{
            position: absolute;
            bottom:-70px;
            height:70px;
            width:70px;
            z-index: 11;
        }
        .grabber .hook .hookq,
        .grabber .hook .hookl,
        .grabber .hook .hookr{
            display: block;
            position: absolute;
            left: 0;
            top:0;
            width: 100%;
            height: 100%;
            transition: all 0.3s ;
            transform-origin:50% 0 ;
        }
        .grabber .hook .hookq{
            background: url("images/prizeClaw/hookq.png") no-repeat center;
            background-size: cover;
            z-index: 1;
        }
        .grabber .hook .hookl{
            background: url("images/prizeClaw/hookl.png") no-repeat center;
            background-size: cover;
        }
        .grabber .hook .hookr{
            background: url("images/prizeClaw/hookr.png") no-repeat center;
            background-size: cover;
        }

        .grabber.act .hook .hookl{
            transform:rotate(15deg) ;
        }
        .grabber.act .hook .hookr{
            transform:rotate(-15deg) ;
        }
        .grabber .gift{
            position: absolute;
            bottom: 0;
            margin-left: -25%
        }

        .gifts-wrap{
            position: absolute;
            left: 0;
            bottom: 40px;
            height:178px;
            width: 100%;
            overflow: hidden;
            box-sizing: border-box;
        }
        .scroll-floor{
            position: absolute;
            left: 0;
            bottom: 0;
            height:75px;
            width: 100%;
            overflow: hidden;
            box-sizing: border-box;
            background: url("images/prizeClaw/floor-01.png") repeat-x center bottom;
            background-size: contain;
        }
        .gifts-wrap .gift {
            position: absolute;
            bottom:0;
        }

        .grabber .gift:after,
        .gifts-wrap .gift:after{
            content: "";
            display: block;
            position: absolute;
            left: 50%;
            width: 3rem;
            margin-left: -1.5rem;
            bottom: 0;
            height: 1rem;
            background:url("images/prizeClaw/yinying.png") no-repeat center bottom;
            background-size: contain;
            z-index: 1;
        }

        .gifts-wrap .gift.act{
            /*background-color:red;*/
            z-index: 99;
        }
        .grabber .gift:after,
        .gifts-wrap .gift.act:after{
            background:transparent;
        }


        .gift img{
            display: block;
            position: absolute;
            left: 50%;
            bottom:0;
            width:100%;
            margin-left: -50%;
            z-index: 8;
        }
        .handlePlane{
            padding: 0.3rem;
            background: url("images/prizeClaw/btn-bg.png") no-repeat center top;
            background-size: cover;
        }
        .f{

            width: 8rem;
            height: 2.6rem;

        }

        .handlePlane .startBtn{
            display: block;
            width: 8rem;
            height: 2rem;
            background: url("images/prizeClaw/start.png") no-repeat center;
            background-size: contain;
            margin-left: 6.8rem;

        }
        .handlePlane .startBtn.active{

            background: url("images/prizeClaw/start2.png") no-repeat center;
            background-size: contain;
        }


        #cjj .jp-layer-box{
            width: 60%;
        }
        #cjj .jp-layer h4{
            color: #1BCA9A;
        }
        #cjj .jp-layer img{
            width: 50%;
            display: block;
            margin: 10px auto;
        }
        #cjj .jp-layer p{
            font-size: 14px;
            line-height: 30px;
            text-align: center;
            font-weight: bold;
        }

    </style>
</head>
<body id="cjj">
    <div class="container" >
        <div class="loading">
            <img class="tit" src="images/prizeClaw/tit.png">
            <div class="progress" >
                <div id="degree" class="degree"><img class="lod" src="images/prizeClaw/lod.png"></div>
            </div>
        </div>
        <div class="container">
            <div class="screen-wrap">
                <div class="scene">
                    <div class="plane"></div>
                </div>
                <div class="top-ban">

                    <div class="grabber">
                        <div class="hook ">
                            <div class="hookq"></div>
                            <div class="hookl"></div>
                            <div class="hookr"></div>

                        </div>

                    </div>
                </div>
                <div class="scroll-floor"></div>

                <div class="gifts-wrap"></div>



            </div>
            <div class="handlePlane">
                <div class="grooveBtn">
                    <a class="startBtn" id="start"></a>
                </div>

            </div>

        </div>
    </div>
    <script src="js/rem.js"></script>
    <script src="js/jquery.js"></script>
    <script src="js/jgestures.js"></script>
    <script src="libs/layer_mobile/layer.js"></script>
    <script src="js/rolls.js"></script>
</body>
</html>